<template>
    <!-- <div>
        <custom-nav-bar :text="'我的预约'" :bgColor="'#F0F3F7'" :frontColor="'#432F37'" showLeftIcon :isFixed="true" isPlaceholder />
    </div> -->
    <div class="g-page-box page page-order-index">
        <view class="course-order-card-box">
            <!-- <view class="skeleton" v-if="!dataLoaded">
                <view class="skeleton-item" v-for="i in 10" :key="i"></view>
            </view> -->
            <view v-if="loading" class="loading-box">
                <my-loading />
            </view>
            <view class="g-radius-40 g-bg-white course-order-card" v-for="(item, index) in myOrderStore.list" :key="index">
                <view class="course-orders-box">
                    <view class="g-flex-col course-order-item">
                        <view class="g-fw-b g-flex-row course-order-item-ct">
                            <view class="g-flex-row order-title">
                                开单时间：
                            </view>
                            <view>
                                <text class="g-fs-28 order-ct">{{ dayjs(item.orderTime).format('YYYY-MM-DD HH:mm') }}</text>
                            </view>
                        </view>
                        <view class="g-fw-b g-flex-row course-order-item-ct">
                            <view class="g-flex-row order-title">
                                开单项目：
                            </view>
                            <view>
                                <text class="g-fs-28 order-ct">{{ item.itemName }}</text>
                            </view>
                        </view>
                        <view class="g-fw-b g-flex-row course-order-item-ct sale-price-box">
                            <view class="g-fs-24 g-color-gray g-flex-row sale-price">
                                原价：¥{{ Number(item.orderAmount).toFixed(2) }}
                            </view>
                            <view>
                                <text v-if="parseFloat(item.discountAmount)>0" class="g-fs-28 order-ct di-kou">会员卡抵扣: ¥{{ Number(item.discountAmount).toFixed(2) }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="g-flex-row oper-box">
                    <view class="g-flex-row order-title">
                        支付金额：
                    </view>
                    <view>
                        <text class="g-fs-28 order-ct">¥{{ Number(item.paidAmount).toFixed(2) }}</text>
                    </view>
                </view>
            </view>
            <view class="scroll-loading-box">
                <text class="g-color-gray" v-if="!myOrderStore.ifMore">没有更多了</text>
                <text  class="g-color-gray" v-else>正在努力加载...</text>
            </view>
        </view>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import useLogin from "@/functions/useLogin";
import { useMyOrderStore } from '@/store/myOrder';
import { useGlobalStore } from "@/store/gobal";
import { onShow, onPageScroll, onLoad ,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
import { debounce } from '@/utils';
import dayjs from 'dayjs'

const loginS = useLogin();
const myOrderStore = useMyOrderStore();
const globalStore = useGlobalStore();
const loading = ref(false);

const getTodayCls = (courseDate)=>{
    // courseData:"2025-05-20"  判断是否为今天
    return dayjs(courseDate).isSame(dayjs(), 'day') ? " oper-box-today" : ""
}

// 上课后不能取消
const ifCancel = (row) => {
  const now = new Date().getTime();
  const courseStartTime = dayjs(row?.courseStartTime).valueOf();
  console.log(now, courseStartTime);
  return (now < courseStartTime || row.checkInStatus !== '1') && (row.status === '0' || row.status === '1');
};

// 取消订单
const cancelOrder = async (item) => {
    uni.showModal({
        title: '提示',
        content: '确定取消本次预约吗？',
        success: async function(res) {
            if (res.confirm) {
                const res = await myOrderStore.cancelCourseOrder(item.courseOrderCode);
                if (res && res.status === 200) {
                    uni.showToast({
                        title: '取消成功！',
                        icon: 'success',
                        duration: 2000
                    });
                } else {
                    uni.showToast({
                        title: (res && res.message) || '取消失败！',
                        icon: 'none',
                        duration: 2000
                    });
                }
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        }
    });
};

// 下拉刷新时调用
onPullDownRefresh(async () => {
    //   page.value = 1; // 重置页码
    //   list.value = []; // 清空列表
    //   hasMore.value = true; // 重置有更多数据的标志
    //   await fetchList(page.value, limit.value); // 重新获取数据
    console.log('下拉刷新');
    myOrderStore.current = 1;
    loading.value = true;
    await myOrderStore.getList();
    loading.value = false;
    uni.stopPullDownRefresh(); // 停止下拉刷新动画
});

// 下拉到底部加载更多
onReachBottom(async () => {
    console.log('到底了');
    // 如果还没有加载完继续加载数据
    if (myOrderStore.ifMore) {
        myOrderStore.current = myOrderStore.current + 1;
        myOrderStore.getList();
    }
    // myOrderStore.getList();
});

onShow(async () => {
    loading.value = true;
    const flag = await loginS.checkLogin();
    if(flag){
        console.log('已登录');
        await myOrderStore.getList();
        loading.value = false;
    }
});

</script>
<style scoped lang="scss">
.page-order-index {
    padding-bottom: 60rpx;
    overflow-x: hidden;
    // /* 骨架屏样式 */
    // .skeleton {
    //     padding:40rpx 24rpx
    // }

    // .skeleton-item {
    //     background-color: #E8EBF3;
    //     height: 368rpx;
    //     margin-bottom: 40rpx;
    //     animation: pulse 1.5s infinite ease-in-out;
    //     border-radius: 40rpx;
    // }

    // @keyframes pulse {
    //     0% {
    //         opacity: 1;
    //     }
    //     50% {
    //         opacity: 0.5;
    //     }
    //     100% {
    //         opacity: 1;
    //     }
    // }
    .tip{
        width: 100%;
        height: 64rpx;
        background: #E8EBF3;
        .tip-icon{
            height:36rpx;
            width: 36rpx;
            margin-left: 24rpx;
        }  
    }
    .course-order-card-box{
        padding: 40rpx 24rpx;
    }
    .course-order-card {
        overflow: hidden;
        padding: 0rpx;
        padding-top: 0;
        box-sizing: border-box;
        margin-bottom:40rpx;
        .course-orders-box{
            padding:4rpx 32rpx 32rpx 32rpx;
        }
        .date-query-box {
            display: flex;
            justify-content: space-between; // 图标均匀分布
            flex-wrap: nowrap; // 超出自动换行
            .date-query-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                border-radius: 50rpx;
                padding: 22rpx;
                background: #F0F2FA;

                .date-query-item-label {
                    padding-bottom: 32rpx;
                    font-weight: bold;
                }

                .date-query-item-date {
                    color: #666;
                }
            }

            .date-query-item.date-query-box-disable {
                .date-query-item-label {
                    color: #D5D5D5;
                }

                .date-query-item-date {
                    color: #D5D5D5;
                }
            }

            .date-query-item.date-query-item-active {
                .date-query-item-label {
                    color: #7966B3;
                }

                .date-query-item-date {
                    color: #7966B3;
                    font-weight: bold;
                }
            }
        }

        .course-orders-box {
            .course-order-item {            
                .course-order-item-hd {
                    width: 100%;
                    padding-bottom: 20rpx;
                    padding-top: 32rpx;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between; // 图标均匀分布

                    .course-remaining-box {
                        color: #999;

                        .split-icon {
                            width: 6rpx;
                            height: 16rpx;
                            border-radius: 4rpx;
                            background: #7966B3;
                            margin-right: 12rpx;
                        }

                        .remain-count {
                            color: #333;
                        }
                    }
                }
                .line{
                    width: 100%;
                    height: 1px;
                    border-bottom: 2px dashed #E4E4E4;
                }
                .course-order-item-ct {
                    width: 100%;
                    padding-top: 26rpx;

                    .course-order-item-avatar-box {
                        margin-right: 28rpx;

                        .course-order-item-avatar {
                            width: 140rpx;
                            height: 140rpx;
                            border-radius: 70rpx;
                        }
                    }

                    .course-info-box {
                        flex: 1;

                        .course-name {
                            // 超过隐藏
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 1; // 显示行数
                            -webkit-box-orient: vertical; // 垂直排列
                            line-height: 44rpx;
                        }

                        .course-desc {
                            padding: 16rpx 0rpx;
                            font-size: 28rpx;
                            color: #666666;
                            line-height: 34rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 1; // 显示行数
                            -webkit-box-orient: vertical; // 垂直排列
                        }

                        .course-name-box {
                            line-height: 40rpx;

                            .course-age {
                                margin-left: 16rpx;
                                border-radius: 8rpx;
                                border: 1px solid #CBCBCB;
                                padding: 4rpx 10rpx;
                            }
                        }

                        .course-order-box {
                            width: 100%;
                            justify-content: space-between;
                            align-items: baseline;
                            padding-top: 10rpx;
                            padding-bottom: 37rpx;
                            border-bottom: 1px solid #D8D8D8;

                            .price-box {
                                align-items: baseline;
                            }

                            .tag1 {
                                font-size: 24rpx;
                                background: linear-gradient(180deg, #ECD17E 0%, #E2973B 100%);
                                border-radius: 8rpx 200rpx 8rpx 8rpx;
                                padding: 5rpx 20rpx 5rpx 10rpx;
                                color: #B04309;
                            }

                            .market-price {
                                text-decoration: line-through;
                                color: #999;
                                font-size: 24rpx;
                            }

                            .order-course {
                                margin: 0;
                                padding: 0;
                                line-height: 56rpx;
                                width: 120rpx;
                                height: 56rpx;
                                border-radius: 12rpx;
                                background: #7966B3;
                                font-size: 28rpx;
                                color: #fff;
                            }
                        }
                    }
                }
                .sale-price-box{
                    display: flex;
                    justify-content: space-between; // 图标均匀分布
                    .sale-price{
                        font-weight: normal;
                    }
                    .order-ct{
                        color: #7966B3;
                        background: #F4F1FF;
                        border-radius: 22rpx;
                        padding:5rpx 16rpx;
                        font-weight: normal;
                    }
                }
            }
        }
    }
    .oper-box{
       width:100%;
       box-sizing: border-box;
       padding:20rpx 32rpx;
       background: #E8EBF3;
       line-height: 60rpx;
       .cancel-btn{
            height: 56rpx;
            background: #FFFFFF;
            border-radius: 12rpx 12rpx 20rpx 12rpx;
            border: 1px solid #333333;
            text-align: center;
            line-height: 56rpx;
            margin:0rpx;
            padding:0rpx;
            padding-left:32rpx;
            padding-right:32rpx;
            &.disabled{
                border-width: 0rpx;
                background: #E5E5E5;
                //border-radius: 12rpx 12rpx 20rpx 12rpx;
                border: 1px solid #efefef;
            }
       }
    }
    .oper-box.oper-box-today{
        color:#fff;
        background:#7966B3
    }
    .course-lists-box {
        margin-left:32rpx;
        margin-right:32rpx;
        .course-list-item {            
            .course-list-item-hd {
                width: 100%;
                padding-bottom: 20rpx;
                padding-top: 32rpx;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between; // 图标均匀分布
                color:#666;
                .course-remaining-box {
                    color: #999;

                    .split-icon {
                        width: 6rpx;
                        height: 16rpx;
                        border-radius: 4rpx;
                        background: #7966B3;
                        margin-right: 12rpx;
                    }

                    .remain-count {
                        color: #333;
                    }
                }
            }
            .line{
                width: 100%;
                height: 1px;
                border-bottom: 2px dashed #E4E4E4;
            }
            .course-list-item-ct {
                width: 100%;
                padding-bottom:32rpx;
                .course-list-item-avatar-box {
                    margin-right: 28rpx;

                    .course-list-item-avatar {
                        width: 140rpx;
                        height: 140rpx;
                        border-radius: 70rpx;
                    }
                }

                .course-info-box {
                    flex: 1;

                    .course-name {
                        // 超过隐藏
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1; // 显示行数
                        -webkit-box-orient: vertical; // 垂直排列
                        line-height: 44rpx;
                    }

                    .course-desc {
                        padding: 16rpx 0rpx;
                        font-size: 28rpx;
                        color: #666666;
                        line-height: 34rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1; // 显示行数
                        -webkit-box-orient: vertical; // 垂直排列
                    }

                    .course-name-box {
                        line-height: 40rpx;

                        .course-age {
                            margin-left: 16rpx;
                            border-radius: 8rpx;
                            border: 1rpx solid #CBCBCB;
                            padding: 4rpx 10rpx;
                        }
                    }

                    .course-order-box {
                        width: 100%;
                        justify-content: space-between;
                        align-items: baseline;
                        padding-top: 10rpx;
                        padding-bottom: 37rpx;
                        border-bottom: 1px solid #D8D8D8;

                        .price-box {
                            align-items: baseline;
                        }

                        .tag1 {
                            font-size: 24rpx;
                            background: linear-gradient(180deg, #ECD17E 0%, #E2973B 100%);
                            border-radius: 8rpx 200rpx 8rpx 8rpx;
                            padding: 5rpx 20rpx 5rpx 10rpx;
                            color: #B04309;
                        }

                        .market-price {
                            text-decoration: line-through;
                            color: #999;
                            font-size: 24rpx;
                        }

                        .order-course {
                            margin: 0;
                            padding: 0;
                            line-height: 56rpx;
                            width: 120rpx;
                            height: 56rpx;
                            border-radius: 12rpx;
                            background: #7966B3;
                            font-size: 28rpx;
                            color: #fff;
                        }
                    }
                }
            }
        }        
    } 
    // 底部加载样式
    .scroll-loading-box{
        width: 100%;
        height: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top:-40rpx
    }   
}
</style>